<template>
  <div ref="tool" class="flow-menu">
    <div v-for="menu in menuList" :key="menu.id">
      <span class="ef-node-pmenu" @click="menu.open = !menu.open"
        ><i
          :class="{
            'el-icon-caret-bottom': menu.open,
            'el-icon-caret-right': !menu.open
          }"
        ></i
        >&nbsp;{{ menu.name }}</span
      >
      <ul v-show="menu.open" class="ef-node-menu-ul clearfix">
        <draggable
          v-model="menu.children"
          :options="draggableOptions"
          @end="end"
          @start="move"
        >
          <li
            v-for="subMenu in menu.children"
            :key="subMenu.id"
            class="ef-node-menu-li "
            :type="subMenu.type"
          >
            <div>
              <svg-icon :icon-class="subMenu.ico"></svg-icon>
            </div>
            <div>
              {{ subMenu.name }}
            </div>
            <!-- <i :class="subMenu.ico"></i> {{ subMenu.name }} -->
          </li>
        </draggable>
      </ul>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";

var mousePosition = {
  left: -1,
  top: -1
};

export default {
  components: {
    draggable
  },
  data() {
    return {
      activeNames: "1",
      // draggable配置参数参考 https://www.cnblogs.com/weixin186/p/10108679.html
      draggableOptions: {
        preventOnFilter: false,
        sort: false,
        disabled: false,
        ghostClass: "tt",
        // 不使用H5原生的配置
        forceFallback: true
        // 拖拽的时候样式
        // fallbackClass: 'flow-node-draggable'
      },
      // 默认打开的左侧菜单的id
      defaultOpeneds: ["1", "2", "3"],
      menuList: [
        {
          id: "1",
          type: "group",
          name: "营销动作",
          open: true,
          children: [
            {
              id: "11",
              type: "message",
              name: "短信发送",
              ico: "market-msg",
              // 自定义覆盖样式
              style: {}
            },
            {
              id: "12",
              type: "wx",
              name: "微信发送",
              ico: "market-wx",
              // 自定义覆盖样式
              style: {}
            }
          ]
        },
        {
          id: "21",
          type: "group",
          name: "条件控制",
          open: true,
          children: [
            {
              id: "21",
              type: "timer",
              name: "时间分支",
              ico: "market-timer",
              // 自定义覆盖样式
              style: {}
            },
            {
              id: "23",
              type: "copy",
              name: "复制分支",
              ico: "market-copy",
              // 自定义覆盖样式
              style: {}
            },
            {
              id: "24",
              type: "random",
              name: "随机分支",
              ico: "market-random",
              // 自定义覆盖样式
              style: {}
            }
          ]
        },
                {
          id: '4',
          type: 'group',
          name: '逻辑操作',
          ico: '+',
          open: true,
          children: [
             {
              id: '41',
              type: 'merge',
              name: '合并',
              ico: 'market-merge',
              // 自定义覆盖样式
              style: {}
            },
             {
              id: '42',
              type: 'union',
              name: '交集',
              ico: 'market-union',
              // 自定义覆盖样式
              style: {}
            },
             {
              id: '43',
              type: 'except',
              name: '差集',
              ico: 'market-except',
              // 自定义覆盖样式
              style: {}
            },
             {
              id: '44',
              type: 'exclusion',
              name: '排重',
              ico: 'market-exclusion',
              // 自定义覆盖样式
              style: {}
            }
          ]
        },
        {
          id: "3",
          type: "group",
          name: "流程控制",
          ico: "+",
          open: true,
          children: [
            // {
            //   id: '31',
            //   type: 'start',
            //   name: '开始',
            //   ico: 'market-start',
            //   // 自定义覆盖样式
            //   style: {}
            // },
            {
              id: "32",
              type: "end",
              name: "流程结束",
              ico: "market-end",
              // 自定义覆盖样式
              style: {}
            },
            {
              id: "33",
              type: "wait",
              name: "等待",
              ico: "market-wait",
              // 自定义覆盖样式
              style: {}
            }
          ]
        }
      ],
      nodeMenu: {}
    };
  },
  created() {
    /**
     * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
     * @param event
     */
    if (this.isFirefox()) {
      document.body.ondrop = function(event) {
        // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
        mousePosition.left = event.layerX;
        mousePosition.top = event.clientY - 50;
        event.preventDefault();
        event.stopPropagation();
      };
    }
  },
  methods: {
    // 根据类型获取左侧菜单对象
    getMenuByType(type) {
      for (let i = 0; i < this.menuList.length; i++) {
        const children = this.menuList[i].children;
        for (let j = 0; j < children.length; j++) {
          if (children[j].type === type) {
            return children[j];
          }
        }
      }
    },
    // 拖拽开始时触发
    move(evt, a, b, c) {
      console.log(a, b, c, "move");
      var type = evt.item.attributes.type.nodeValue;
      this.nodeMenu = this.getMenuByType(type);
    },
    // 拖拽结束时触发
    end(evt, e) {
      // console.log(e, "拖拽结束时触发");
      this.$emit("addNode", evt, this.nodeMenu, mousePosition);
    },
    // 是否是火狐浏览器
    isFirefox() {
      var userAgent = navigator.userAgent;
      if (userAgent.indexOf("Firefox") > -1) {
        return true;
      }
      return false;
    }
  }
};
</script>
<style lang="scss">
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
</style>
